<template>
	<view class="detail-container">

		<!-- 所有信息顺序展示 -->
		<view class="form-list">
			<view class="form-item"><text class="form-label">单号：</text><input class="form-input"
					v-model="detail.orderNo" disabled /></view>
			<view class="form-item"><text class="form-label">批次号：</text><input class="form-input"
					v-model="detail.batchNo" disabled /></view>
			<view class="form-item"><text class="form-label">品种：</text><input class="form-input" v-model="detail.type"
					disabled /></view>
			<view class="form-item"><text class="form-label">供应商：</text><input class="form-input"
					v-model="detail.supplier" disabled /></view>
			<view class="form-item"><text class="form-label">车牌号码：</text><input class="form-input"
					v-model="detail.carNo" disabled /></view>
			<view class="form-item"><text class="form-label">电话号码：</text><input class="form-input"
					v-model="detail.phone" disabled /></view>
			<view class="form-item"><text class="form-label">日期：</text><input class="form-input" v-model="detail.date"
					disabled /></view>
			<view class="form-item"><text class="form-label">总重量：</text><input class="form-input"
					v-model="detail.totalWeight" disabled /></view>
			<view class="form-item"><text class="form-label">出成率：</text><input class="form-input"
					v-model="detail.yieldRate" disabled /></view>
			<view class="form-item"><text class="form-label">总金额：</text><input class="form-input"
					v-model="detail.amount" disabled /></view>
			<view class="form-item"><text class="form-label">金额大写：</text><input class="form-input"
					v-model="detail.amountUpper" disabled /></view>
			<view class="form-item"><text class="form-label">复核：</text><input class="form-input"
					v-model="detail.recheck" disabled /></view>
			<view class="form-item"><text class="form-label">供应商/交货人：</text><input class="form-input"
					v-model="detail.supplierPerson" disabled /></view>
			<view class="form-item"><text class="form-label">司机员：</text><input class="form-input"
					v-model="detail.driver" disabled /></view>
			<view class="form-item"><text class="form-label">品控人：</text><input class="form-input"
					v-model="detail.qualityPerson" disabled /></view>
			<view class="form-item"><text class="form-label">采购员：</text><input class="form-input"
					v-model="detail.purchaser" disabled /></view>
			<view class="form-item"><text class="form-label">附件上传</text>
				<view class="upload-box">
					<image class="upload-img" :src="detail.attachment || defaultImg" mode="aspectFit"></image>
				</view>
			</view>
		</view>
		<!-- 底部操作按钮 -->
		<view class="bottom-btns">
			<button class="bottom-btn">查看明细</button>
			<button class="bottom-btn">查看抽样情况</button>
			<button class="bottom-btn">查看活鱼情况</button>
			<button class="bottom-btn">查看其余鱼情况</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				defaultImg: '/static/upload_placeholder.png',
				detail: {
					orderNo: '777yyy',
					batchNo: 'wefw',
					type: '罗非鱼',
					supplier: '刘刘刘',
					carNo: '粤K 123HH',
					phone: '13632238674',
					date: '2024-12-15 11:00--12:00',
					totalWeight: '100',
					yieldRate: '40',
					amount: '20',
					amountUpper: '一万',
					recheck: '20',
					supplierPerson: '20',
					driver: '20',
					qualityPerson: '20',
					purchaser: '20',
					attachment: ''
				}
			}
		},
		methods: {
			goBack() {
				uni.navigateBack();
			}
		}
	}
</script>

<style scoped lang="scss">
	@import '@/uni.scss';

	.detail-container {
		background: #fff;
		min-height: 100vh;
		padding: 0 20rpx 40rpx 20rpx;
	}

	.detail-header {
		display: flex;
		align-items: center;
		height: 80rpx;
		border-bottom: 1rpx solid #eee;
		margin-bottom: 10rpx;
	}

	.back-btn {
		font-size: 40rpx;
		color: $primary;
		margin-right: 20rpx;
		width: 60rpx;
		text-align: center;
		cursor: pointer;
	}

	.header-title {
		font-size: 30rpx;
		font-weight: bold;
		color: #333;
	}

	.form-list {
		width: 100%;
	}

	.form-item {
		display: flex;
		align-items: center;
		margin-bottom: 24rpx;
	}

	.form-label {
		width: 180rpx;
		font-size: 26rpx;
		color: #333;
		text-align: right;
		margin-right: 12rpx;
		flex-shrink: 0;
	}

	.form-input {
		flex: 1;
		height: 60rpx;
		border: 1rpx solid #a6d3ff;
		border-radius: 10rpx;
		padding: 0 16rpx;
		font-size: 26rpx;
		background: #f7f7f7;
		color: #333;
	}

	.upload-box {
		width: 220rpx;
		height: 120rpx;
		border: 4rpx solid #bbb;
		border-radius: 8rpx;
		background: #f7f7f7;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.upload-img {
		width: 200rpx;
		height: 100rpx;
		object-fit: contain;
	}

	.bottom-btns {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		margin-top: 40rpx;
		gap: 20rpx;
	}

	.bottom-btn {
		flex: 0 0 48%;
		height: 70rpx;
		background: #a6d3ff;
		color: #fff;
		border: none;
		border-radius: 12rpx;
		font-size: 28rpx;
		margin-bottom: 10rpx;
	}
</style>